<template>
  <el-dialog v-model="isShowDialog" title="个人信息" draggable width="700px" align-center class="dialog" @closed="onDialogColsed(ruleFormRef)">
    <el-form :model="formData" :inline="true" label-width="80px" :rules="rules" ref="ruleFormRef">
      <el-form-item label="姓名:">
        <el-input v-model="formData.info.name" disabled />
      </el-form-item>
      <el-form-item label="性别:">
        <el-input v-model="formatterSex" disabled />
      </el-form-item>
      <el-form-item label="身份证号:">
        <el-input v-model="formData.info.identityId" disabled />
      </el-form-item>
      <el-form-item label="学号:" v-if="store.role === 'student'">
        <el-input v-model="formData.info.studentId" disabled />
      </el-form-item>
      <el-form-item label="工号:" v-if="store.role === 'teacher'">
        <el-input v-model="formData.info.workId" disabled />
      </el-form-item>
      <el-form-item label="手机号:">
        <el-input v-model="formData.info.phone" disabled/>
      </el-form-item>
      <el-form-item label="QQ号:">
        <el-input v-model="formData.info.qq" disabled/>
      </el-form-item>
      <el-form-item label="专业:" v-if="store.role === 'student'">
        <el-input v-model="formData.info.major" disabled />
      </el-form-item>
      <el-form-item label="学院:" v-if="store.role === 'student'">
        <el-input v-model="formData.info.college" disabled />
      </el-form-item>
      <el-form-item label="班级:" v-if="store.role === 'student'">
        <el-input  v-model="formData.info.stuClass" disabled />
      </el-form-item>
      <el-form-item label="密码:" prop="info.password">
        <el-input v-model="formData.info.password" class="edit" clearable show-password>
          <template #suffix>
            <el-icon @click="isConfirmPwd = !isConfirmPwd" class="iconBtn"><EditPen /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码:" v-if="isConfirmPwd" prop="confirmPwd" class="animate__animated animate__rubberBand">
        <el-input v-model="formData.confirmPwd" class="edit" clearable show-password />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShowDialog = false" v-if="isConfirmPwd" class="animate__animated animate__rubberBand">取 消</el-button>
        <el-button type="primary" @click="onConfirm(ruleFormRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { IModifyPwd, ITch } from '../../type';
import { useUserStore } from '../../store/user';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useAPI } from '../../request/api';
import { useRuleUtils } from '../../utils/validate';
const api = useAPI();
const store = useUserStore();
const isShowDialog = ref<boolean>(false);
const isConfirmPwd = ref<boolean>(false);
const ruleFormRef = ref<FormInstance>();
const ruleUtils = useRuleUtils();

interface FormData {
  info: any;
  confirmPwd: string;
}

const formatterSex = ref('');
const formData = reactive<FormData>({
  info: JSON.parse(JSON.stringify(store.userInfo)),
  confirmPwd: '',
});

store.$subscribe((args: any, state) => {
  formData.info = state.userInfo;
  formatterSex.value = formData.info.sex === 1 ? '男' : '女';
});
const onConfirm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  //没有修改密码时
  if (!isConfirmPwd.value) {
    formEl.validateField('info.password', valid => {
      if (valid) isShowDialog.value = false;
      else return false;
    });
  } else {
    formEl.validate(valid => {
      if (valid) modifyPwd();
      else return false;
    });
  }
};
const modifyPwd = async () => {
  const data:IModifyPwd = {id: store.userInfo.id,password: formData.confirmPwd}
  const res = await api.modifyPwd(data, store.role);
  if (res.data) {
    ElMessage.success('修改成功');
    isShowDialog.value = false;
    isConfirmPwd.value = false;
  } else {
    ElMessage.error('服务器错误');
  }
};
const onDialogColsed = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  isConfirmPwd.value = false;
  formData.confirmPwd = '';
  formEl.clearValidate();
};

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else if (!/^\S*(?=\S{6,})\S*$/.test(value)) {
    callback(new Error('密码长度不小于6位'));
  } else if (value !== formData.info.password) {
    callback(new Error('两次密码不一致'));
  } else {
    callback();
  }
};

const rules = reactive({
  'info.password': [{ validator: ruleUtils.password, trigger: 'blur' }],
  confirmPwd: [{ validator: validatePass2, trigger: 'blur' }],
});

defineExpose({ isShowDialog });
</script>

<style lang="scss" scoped>
article {
  color: var(--font-color);
  padding: 1px 11px;
}

:deep(.el-input__wrapper) {
  width: 215px;
  // // background-color: transparent;
  // box-shadow: 0 0 0 0;
}
// :deep(.el-textarea__inner) {
//   background-color: var(--main-color);
// }

.el-icon:hover {
  cursor: pointer;
}
</style>
